<template>
    <div class="box">
        <el-row class="searchPlate">
            <el-col :span="22">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="name">
                        <el-input
                            v-model="ruleForm.name" 
                            placeholder="请输入专利名称，专利号等专利信息进行查询">
                        </el-input>
                        
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="2" style="text-align:left;padding-left:20px;">
                <el-button type="primary" class="btn">查询</el-button>
            </el-col>
        </el-row>
        <div class="list">
            <ul>
                <li v-for="(i,index) in data" :key="index">
                    <div>
                        <img src='@/assets/img/NoDrawings.jpg' width="150" height="200"/>
                    </div>
                    <div class="textPlate">
                        <div>
                            <h2 @click="Detail(i.PublicNumber,i.title)">{{i.title}}</h2>
                            <span class="red">有权</span>
                            <a class="blue">使用新型</a>
                            <i class="iconfont icon-fanyi" style="font-size:20px;"></i>
                            <p class='archives'>专利档案</p>
                        </div>
                        <el-row class="paragraph" style="padding-top:10px;">
                            <el-col :span="6">
                                <span>申请号：</span>
                                <a class="fontcolor">{{i.ap}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>申请日：</span>
                                <a>{{i.filingDate}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>公开日：</span>
                                <a>{{i.openDate}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>发明人：</span>
                                <a>{{i.inventor | filters}}</a>
                            </el-col>
                        </el-row>
                        <el-row class="paragraph">
                            <el-col :span="6">
                                <span>申请人：</span>
                                <a>{{i.applicant | filters}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>公开号：</span>
                                <a class="fontcolor">{{i.PublicNumber}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>IPC：</span>
                                <a>{{i.ipc}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>优先权：</span>
                                <a>{{i.index}}</a>
                            </el-col>
                        </el-row>
                        <el-row class="abstract">
                            <el-col :span="24">
                                <span>摘要：</span>
                                <a>{{i.abstract}}</a>
                            </el-col>
                        </el-row>
                        <el-row class="paragraph" style="padding-top:15px;">
                            <el-col :span="6">
                                <span>特征度：</span>
                                <a>{{i.CharacteristicCapital}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>同族数：</span>
                                <a>{{i.CongenericNumber}}</a>
                            </el-col>
                            <el-col :span="6">
                                <span>权项数：</span>
                                <a>{{i.weighted}}</a>
                            </el-col>
                        </el-row>
                    </div>
                </li>
            </ul>
            <div style="padding:10px;">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="ips"
                    :current-page.sync="ipi"
                    @current-change="getSuitCurrentPage"
                    class="el-pagination">
                </el-pagination>
            </div>
        </div>
        <!-- <router-view></router-view> -->
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            ruleForm:{
                name:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入专利名称，专利号等专利信息进行查询', trigger: 'blur' }
                ]
            },
            data:[
                {
                    // img:'@/assets/img/NoDrawings.jpg',
                    title:'基于指纹识别技术得票据保险箱',
                    ap:"CN201680000829.9", // 申请号
                    filingDate:'2016-02-03',  //  申请日
                    openDate: '2016-11-02' , // 公开日
                    inventor: ['埃里克·塞特贝里'] , // 发明人
                    applicant:['唐京桥','陈炜'] , // 申请人
                    PublicNumber:'CN106068517A' , //公开号
                    ipc:'' ,
                    index: "20150206 SE1550135-6" , //优先权
                    abstract: "本发明涉及无人机技术领域，尤其是一种无人机空管语音通信系统。包括机载通信系统和地面通信系统，所述机载通信系统通过电台与外部空管单位、飞行器进行通信，飞行器进行通信，所述机载通信系统具有编解码器用于通信数据的转换；所述机载通信系统和地面通信系统均通过各自的编解码器与无人机指挥与控制数据链路进行双向通信。本发明在不改变现有空管单位设备和工作方式的前提下，通过现有的数据链路实现了无人机操作人员与空管单位之间的语音通信.", // 摘要
                    CharacteristicCapital : '' , // 特征度
                    CongenericNumber :'' ,// 同族数
                    weighted : ''  // 权项数
                },
                {
                    title:'一种结构紧凑的光源系统',
                    ap:"CN201610154376.7", // 申请号
                    filingDate:'2013-02-05',  //  申请日
                    openDate: '2017-09-22' , // 公开日
                    inventor: ['胡飞'] , // 发明人
                    applicant:['深圳光峰科技股份有限公司'] , // 申请人
                    PublicNumber:'CN105676578B' , //公开号
                    ipc:'' ,
                    index: "20150206 SE1550135-7" , //优先权
                    abstract: "本发明公开了一种利用激光激发荧光粉的光源系统，包括：第一激发光源、第一反射镜、收集透镜、准直透镜、荧光粉层和第二反射镜。荧光粉层涂覆在第二反射镜上，准直透镜具有朝向荧光粉层的第一表面，第一反射镜位于该第一表面上，且第一激发光源和荧光粉层位于准直透镜的同侧，相对于现有技术，该光源系统具有体积小，结构紧凑，散热设计容易等优点。", // 摘要
                    CharacteristicCapital : '' , // 特征度
                    CongenericNumber :'' ,// 同族数
                    weighted : ''  // 权项数
                },
                {
                    title:'光源系统及相关投影系统',
                    ap:"CN201510251472.9", // 申请号
                    filingDate:'2012-04-24',  //  申请日
                    openDate: '2017-05-17' , // 公开日
                    inventor: ['李屹','张权'] , // 发明人
                    applicant:['深圳光峰科技股份有限公司'] , // 申请人
                    PublicNumber:'CN104865783B' , //公开号
                    ipc:'' ,
                    index: "20150206 SE1550135-8" , //优先权
                    abstract: "本发明实施例公开了一种光源系统及相关投影系统，该光源系统包括发光装置，该发光装置包括：LED阵列，用于产生第一光线；激光光源，用于产生激光；波长转换装置，包括用于吸收激光以产生受激光的波长转换层，该波长转换装置出射受激光的至少部分光，或该受激光的至少部分光与未被吸收的激光的至少部分光的混合光；驱动装置，用于驱动波长转换装置，以使激光在波长转换层上形成的光斑沿预定路径作用于该波长转换层；并且，第一光线与波长转换装置的出射光以几何合光的方式合为一束合光。本发明能使光源系统在达到较高光通量输出的同时较有效控制体积与成本。", // 摘要
                    CharacteristicCapital : '' , // 特征度
                    CongenericNumber :'' ,// 同族数
                    weighted : ''  // 权项数
                }
            ],
            dateVal:"",
            ipi:1,
            ips:5,
            total:0
        }
    },
    filters:{
        filters(val){
            let str = ''
            // console.log(val)
            if(val){
                val.forEach(i => {
                    str+= i+'，'
                });
            }
            str = str.substring(0,str.length-1)
            return str
        }
    },
    computed:{
        ...mapState(['levelCode'])
    },
    mounted(){
        this.dateVal = this.$DateManag()
        // this.init()
    },
    methods:{
        init(){
            this.$post(this.$Url.finance.cityZhiya,{
                "code": this.levelCode,
                "musts": {
                    "legal_zhiya": "1"
                },
                "ipi": this.ipi,
                "ips": this.ips,
                "rangArr": [
                    {
                        "field": "ad",
                        "start": this.dateVal.start,
                        "end": this.dateVal.end
                    }
                ]
            }).then(res=>{
                if(res.data.result){
                    this.total = res.data.page.totalRow
                    this.data = res.data.result
                }
            }).catch(e=>{console.log(e)})
        },
        getSuitCurrentPage(){

        },
        Detail(pn,title){
            this.$router.push({
                name:'ScienceFinancePatentDetail',
                query:{
                    pn:pn,
                    title:title
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.box{
    width:100%;
    background:#fff;
    .searchPlate{
        padding:20px;
        padding-bottom:0;
    }
    .btn{
        width:100%;
    }
    .list{
        border-top:1px solid #ddd;
        ul{
            width:100%;
            li{
                width:100%;
                padding:20px 0;
                text-align:left;
                position:relative;
                border-bottom:1px solid #ddd;
                overflow:hidden;
                .textPlate{
                    padding-left:190px;
                    position:absolute;
                }
                >div{
                    width:100%;
                   float:left;
                   padding-left:20px;
                   >div:first-child{
                        position:relative;
                        width:100%;
                        h2,span,a,i,p{
                           display:inline-block;
                        }
                        h2{
                            cursor: pointer;
                        }
                        a,span{
                           padding:3px 5px;
                           color:#fff;
                           border-radius: 3px;
                           margin-left:15px;
                        }
                        .green{
                           background:#4ed2c4;
                        }
                        .red{
                           background:#f79169;
                        }
                        .blue{
                            background:#2a8cd5;
                        }
                        .grey{
                            background:#b3bcd9;
                        }
                        i{
                            padding-left:10px;
                            color:#504fac;
                            padding-left:15px;
                        }
                        .fontColor{
                            color:#b3bcd9;
                        }
                        .archives{
                            cursor: pointer;
                            line-height:30px;
                            width:80px;
                            text-align:center;
                            color:#504fac;
                            position:absolute;
                            right:40px;
                            background:#f4f5f9;
                            border-radius:2px;
                        }
                   }
                   .paragraph{
                       padding-top:5px;
                       span,a{
                           line-height:22px;
                           text-align:left;
                           display:inline-block;
                           color:#8d8e93;
                       }
                       .fontcolor{
                           color:#5049b0;
                       }
                   }
                   .abstract{
                       padding-top:15px;
                       height:70px;
                   }
                }
            }
            
        }
        
    }
}
</style>